/* 挑战100dayCSS */
.day{
	width: 300px;
	height: 300px;
	margin: 0 auto;
}
.day1 {
	position: relative;
	/* width: 300px;
	height: 300px;
	margin: 0 auto; */
	background: linear-gradient(to right top,#43389F 0%,#4ec6ca 100%);
	font-family: "courier new","Courier",sans-serif;
	box-shadow: 1px 2px 10px  0px rgba(0,0,0,.3);
	color: #FFFFFF;
	.center1{
		position: absolute;
		top: 60%;
		left: 50%;
		transform: translate(-50%,-50%);
		text-align: center;
		
		.number1{
			position: relative;
			width: 180px;
			height: 80px;
			.one-one{
				position: absolute;
				top: 0;
				left: 0;
				width: 20px;
				height: 40px;
				background-color: #FFFFFF;
				border-radius: 5px;
				transform: rotate(50deg);
				box-shadow: 0 0 13px 0px rgba(0,0,0,.2);
			}
			.one-two{
				position: absolute;
				top: 0;
				left: 15px;
				z-index: 2;
				width: 24px;
				height: 80px;
				background-color: #FFFFFF;
				border-radius: 0.3125rem;
				box-shadow: 0 0 13px 0px rgba(0,0,0,.2);
			}
			.zero-one,.zero-two{
				position: absolute;
				left: 35px;
				z-index: 1;
				width: 80px;
				height: 80px;
				border-radius: 50%;
				box-sizing: border-box;
				border: 24px solid #FFFFFF;
				box-shadow: 0 0 10px 0 rgba(0,0,0,.3);
			}
			.zero-two{
				left: 100px;
				z-index: 0;
			}
		}
		.big{
			position: relative;
			top: -10px;
			font-weight: bold;
			font-size: 54px;
			display: block;
			text-transform: uppercase;//转uppercase大写 / lowercase小写
		}
		.small{
			position: relative;
			top: -30px;
			text-transform:uppercase;
			font-weight: bold;
			font-size: 20px;
		}
	}
}
.day2{
	/* width: 300px;
	height: 300px;
	margin: 0 auto; */
	background: lightgreen;
	.content1{
		position: relative;
		width:100%;
		height:100%;
		cursor:pointer;
		
		.lin1,.lin2,.lin3{
			/* 居中 */
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin:auto;
			
			width: 80px;
			height: 10px;
			background-color: #FFFFFF;
			border-radius: 10px;
			box-shadow: 1px 2px 10px 0 rgba(0,0,0,.3);
			
			transition: background-color .12s ease-in-out;
		}
		.lin1{
			background-color: red;
			top: -40px;
			animation: animation-lin1-rev .5s ease-in forwards;
		}
		.lin2{
			background-color: orange;
			top: 0;
			animation: animation-lin2-rev .5s ease-in forwards;
		}
		.lin3{
			background-color: green;
			top: 40px;
			animation: animation-lin3-rev .5s ease-in forwards;
		}
		/* 消除第一次界面自动动画效果 */
		.no-animation{
			animation: none;
		}
		&.active{
			/* background-color: #8A2BE2; */
			.lin1{
				/* animation-fill-mode:forwards; //把物体动画地从一个地方移动到另一个地方，并让它停留在那里 */
				animation: animation-lin1 .5s cubic-bezier(.3,1,.7,1) forwards;
			}
			.lin2{
				animation: animation-lin2 .2s  cubic-bezier(.3,1,.7,1)  forwards;
			}
			.lin3{
				animation: animation-lin3 .5s  cubic-bezier(.3,1,.7,1)  forwards;
			}
		}
	}
}	
.day3{
	position: relative;
	box-shadow: 1px 2px 10px  0px rgba(0,0,0,.3);
	background: #2A2A2A;
	.content1{
		/* 居中 */
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		
		width: 180px;
		height: 180px;
		position:relative;
		/* overflow:hidden; */
		border-radius: 50%;
		clip-path: circle(90px at 90px 90px);
		
		.sky{
			height: 120px;
			background: #7DDFFC;
			
			animation: animation-sky-black 4.5s infinite ease-in-out;
		}
		.sun{
			width: 30px;
			height: 30px;
			background-color: #FFEF00;
			border-radius: 50%;
			position: absolute;
			top: 0px;
			left:30px;
			
			animation: animation-sun 4.5s ease-in-out infinite;
			/* 过渡原点 */
			transform-origin: 100% 400%;
		}
		.side-left{
			width: 90px;
			height: 57px;
			background-color: #f4f4f4;
			position: absolute;
			top: 63px;
			left: 35px;
			/* 裁剪 */
			clip-path: polygon(0% 100%, 100% 100%, 50% 0%);
			
			animation: animation-side-yy 4.5s ease-in-out infinite;
		}
		.side-right{
			width: 58px;
			height: 57px;
			background-color: #272C34;
			position: absolute;
			top: 63px;
			left: 80px;
			/* 裁剪 */
			clip-path: polygon(40% 100%,100% 100%,0% 0%);
			
			animation: animation-side-yy2 4.5s ease-in-out infinite;
		}
		/* 山的影子 */
		.shadow{
			position: absolute;
			top: 120px;
			left: -90px;
			z-index: 1;
			
			width: 260px;
			height: 30px;
			background-color: rgba(0,0,0,.2);
			transform-origin: 30% 0%;
			clip-path: polygon(118px 0%,228px 0%,100% 100%);
			animation: animation-sun-shadow 4.5s ease-in-out infinite; 
		}
		.ground{
			height: 60px;
			background-color: #F0DE75;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
		}
	}
}
.day4{
	position: relative;
	background: #E56262;
	box-shadow: 2px 2px 20px 0px rgba(0,0,0,.3);
	.content1{
		position: absolute;
		top: 0;left: 0;right: 0;bottom: 0;
		margin: auto;
		width: 220px;
		height: 220px;
		/* border: 1px solid; */
		& div{
			/* 居中 */
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			
			border-radius: 50%;
		}
		.dot1{
			width: 50px;
			height: 50px;
			background: #fff;
			animation: animation-dot1 2s ease infinite alternate;
			z-index: 3;
		}
		.dot2{
			width: 100px;
			height: 100px;
			background: #fff;
			animation: animation-dot2 2s ease infinite alternate;
			z-index: 2;
		}
		.dot3{
			width: 140px;
			height: 140px;
			background: #fff;
			animation: animation-dot3 2s ease infinite alternate;
			z-index: 1;
		}
	}
}


/* day2动画 */
@keyframes animation-lin1{
	0%{
		transform:translate3d(0,0px,0) rotate(0deg);
	}
	50%{
		transform:translate3d(0,20px,0) rotate(0deg);
	}
	100%{
		transform:translate3d(0,20px,0) rotate(40deg);
	}
}
@keyframes animation-lin1-rev{
	0%{
		transform:translate3d(0,20px,0) rotate(40deg);
	}
	50%{
		transform:translate3d(0,20px,0) rotate(0deg);
	}
	100%{
		transform:translate3d(0,0,0) rotate(0deg);
	}
}
@keyframes animation-lin2{
	from{
		transform: scale(1);
	}
	to{
		transform: scale(0);
	}
}
@keyframes animation-lin2-rev{
	from{
		transform: scale(0);
	}
	to{
		transform: scale(1);
	}
}
@keyframes animation-lin3{
	0%{
		transform: translate3d(0,0,0) rotate(0deg);
	}
	50%{
		transform: translate3d(0,-20px,0) rotate(0deg);
	}
	100%{
		transform: translate3d(0,-20px,0) rotate(-40deg);
	}
}
@keyframes animation-lin3-rev{
	0%{
		transform: translate3d(0,-20px,0) rotate(-40deg);
	}
	50%{
		transform: translate3d(0,-20px,0) rotate(0deg);
	}
	100%{
		transform: translate3d(0,0,0) rotate(0deg);
	}
}
/* day3动画 */
@keyframes animation-sun{
	0%{
		background-color: #FFEF00;
		transform: rotate(-60deg);
	}
	20%{
		background-color: orange;
		transform: rotate(0deg);
	}
	100%{
		background-color: orangered;
		transform: rotate(120deg);
	}
}
@keyframes animation-side-yy{
	0% {
		background: #f4f4f4;
	}
	10% {
		background: #fff;
	}
	100% {
		background: #272C34;
	}
}
@keyframes animation-side-yy2{
	0% {
		background: #272C34;
	}
	100% {
		background: #f4f4f4;
	}
}
@keyframes animation-sun-shadow{
	0%{
		clip-path: polygon(125px 0%,228px 0%,100% 100%);
	}
	100%{
		clip-path: polygon(125px 0%,228px 0%,0% 100%);
	}
}
@keyframes animation-sky-black{
	0% {
	    background: #272C34;
	  }
	30% {
		background: #7DDFFC;
	}
	70% {
		background: #7DDFFC;
	}
	100% {
	    background: #272C34;
	}
}
/* day4动画 */
@keyframes animation-dot1{
	0%,70%{
		transform: scale(0);
		box-shadow: 2px 2px 3px 2px rgba(0,0,0,0.2);
	}
	100%{
		transform: scale(1);
		box-shadow: 10px 10px 15px 0 rgba(0,0,0,0.3);
	}
}
@keyframes animation-dot2{
	0%,40%{
		transform: scale(0);
		box-shadow: 2px 2px 3px 2px rgba(0,0,0,0.2);
	}
	100%{
		transform: scale(1);
		box-shadow: 10px 10px 15px 0 rgba(0,0,0,0.3);
	}
}
@keyframes animation-dot3{
	0%,10%{
		transform: scale(0);
		box-shadow: 2px 2px 3px 2px rgba(0,0,0,0.2);
	}
	100%{
		transform: scale(1);
		box-shadow: 10px 10px 15px 0 rgba(0,0,0,0.3);
	}
}